<template>
    <div>
        <dtable  :columns="column" :dataAll="dataAll" @sortOrder="sortOrder"
          @changePage="changePage"
          :totals="totals"
        ></dtable>
        <Modal
            title="配置"
            v-model="setting"
            @on-ok="settingOk"
            @on-cancel="settingCancel"
           >
            <Form ref="settingForm" :model="settingFormItem" label-position="left" :label-width="100"  :rules="settingValidate">
                    <FormItem label="别名">
                        <Input v-model="settingFormItem.Alisa"></Input>
                    </FormItem>
                    <FormItem label="PUID"  prop="PUID">
                        <Input v-model="settingFormItem.PUID"></Input>
                    </FormItem>
                     <FormItem label="账号"  prop="Account">
                        <Input v-model="settingFormItem.Account"></Input>
                    </FormItem>
                    <FormItem label="备注">
                        <Input type="textarea" v-model="settingFormItem.Remark"></Input>
                    </FormItem>
            </Form>
        </Modal>
        <Modal
            title="安装"
            v-model="install"
            @on-ok="installOk"
            @on-cancel="installCancel">
            <Form ref="installForm" :model="installFormItem" label-position="left" :label-width="100" :rules="installValidate">
                    <FormItem label="安装结果" prop="InstallResult">
                        <RadioGroup v-model="installFormItem.InstallResult"  type="button">
                            <Radio label="1">已调试</Radio>
                            <Radio label="2">已安装</Radio>
                            <Radio label="3">安装异常</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="联系人" prop="Contact">
                        <Input v-model="installFormItem.Contact"></Input>
                    </FormItem>
                    <FormItem label="电话" prop="Phone">
                        <Input v-model="installFormItem.Phone"></Input>
                    </FormItem>
                  
                    <FormItem label="安装地址" prop="Address">
                        <Input v-model="installFormItem.Address"></Input>
                    </FormItem>
                  
                    <FormItem label="安装备注">
                        <Input type="textarea" v-model="installFormItem.InstallRemark"></Input>
                    </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
import moment from "moment";
import dtable from "@/components/table/btable.vue"; //采用biztable
export default {
  // 入/出库单详情
  name: "implementItem",
  data() {
    return {
      setting: false,
      settingFormItem: {},
      settingValidate: {
        PUID: [
          {
            required: true,
            message: "PUID是必填项！",
            trigger: "blur"
          }
        ],
        Account: [
          {
            required: true,
            message: "账号是必填项！",
            trigger: "blur"
          }
        ]
      },
      install: false,
      installFormItem: {},
      installValidate: {
        InstallResult: [
          {
            required: true,
            message: "请选择安装结果！",
            trigger: "change"
          }
        ],
        Contact: [
          {
            required: true,
            message: "联系人是必填项！",
            trigger: "blur"
          }
        ],
        Phone: [
          {
            required: true,
            message: "电话是必填项！",
            trigger: "blur"
          }
        ],
        Address: [
          {
            required: true,
            message: "请填写安装地址！",
            trigger: "blur"
          }
        ]
      },
      dataAll: [],
      totals: 0,
      pagedata: {
        pagesize: 10,
        page: 1,
        searchKey: "",
        sortby: ["Ctime"],
        order: ["asc"],
        query: null
      },
      column: [
        {
          title: "",
          // key: "Alisa",
          type: "index",
          width: 50
        },
        {
          title: "别名",
          key: "Alisa"
        },
        {
          title: "产品",
          key: "ProdName"
        },
        {
          title: "调试状态",
          key: "Status",
          render: (h, params) => {
            let str = null,
              color = null;
            if (params.row.Status == 1) {
              str = "未调试";
              color = "orange";
            } else {
              str = "已调试";
              color = "blue";
            }
            return h("Tag", { props: { type: "border", color: color } }, str);
          }
        },
        {
          title: "调试人员",
          key: "Seter"
        },
        {
          title: "PUID",
          key: "PUID"
        },
        {
          title: "账号",
          key: "Account"
        },
        {
          title: "调试时间",
          key: "SetTime",
          render: (h, { row }) => {
            let date = moment.utc(row.SetTime);
            if (date.isValid() && date.format("YYYY-MM-DD") != "0001-01-01") {
              return h("span", {}, date.format("YYYY-MM-DD"));
            } else {
              return null;
            }
          }
        },

        {
          title: "安装状态",
          key: "InstallResult",
          render: (h, params) => {
            let str = null,
              color = null;
            switch (params.row.InstallResult) {
              case 0:
                str = "未安装";
                color = "yellow";
                break;
              case 2:
                str = "已安装";
                color = "green";
                break;
              default:
                str = "其它";
                color = "red";
            }
            return h("Tag", { props: { type: "border", color: color } }, str);
          }
        },

        {
          title: "实施人员",
          key: "Installer"
        },
        {
          title: "安装时间",
          key: "InstallTime",
          render: (h, { row }) => {
            let date = moment.utc(row.InstallTime);
            if (date.isValid() && date.format("YYYY-MM-DD") != "0001-01-01") {
              return h("span", {}, date.format("YYYY-MM-DD"));
            } else {
              return null;
            }
          }
        },
        {
          title: "联系人",
          key: "Contact"
        },
        {
          title: "电话",
          key: "Phone"
        },
        {
          title: "安装地址",
          key: "Address"
        },
        {
          title: "操作",
          width: 150,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.settinghandler(params.row);
                    }
                  }
                },
                "配置"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      //   this.remove(params.index)
                      this.installhandler(params.row);
                    }
                  }
                },
                "确认安装"
              )
            ]);
          }
        }
      ]
    };
  },
  computed: {
    implementId() {
      return this.$route.params.implementId;
    }
  },
  components: {
    dtable
  },
  methods: {
    changePage(current) {
      // console.log(current)
      this.pagedata = current
      this.getAll()
    },
    sortOrder(current) {
      this.pagedata = current
      this.getAll()
    },
    settinghandler(row) {
      this.settingFormItem = JSON.parse(JSON.stringify(row));
      this.setting = true;
    },
    settingOk() {
      this.$refs["settingForm"].validate(valid => {
        if (valid) {
          this.$api
            .debugImplementDetails(this.settingFormItem)
            .then(res => {
              if (res.code == 0) {
                this.$Message.success("配置成功！");
                this.settingCancel();
                this.getAll();
              }
            })
            .catch(err => {
              this.$Message.error(err);
            });
        } else {
          this.$Message.error("请完善信息！");
        }
      });
    },
    settingCancel() {
      this.settingFormItem = {};
      this.setting = false;
    },
    installhandler(row) {
      this.installFormItem = JSON.parse(JSON.stringify(row));
      this.install = true;
    },
    installOk() {
      this.$refs["installForm"].validate(ok => {
        if (ok) {
          this.installFormItem.InstallResult = parseInt(
            this.installFormItem.InstallResult
          );
          this.$api.installImplementDetails(this.installFormItem).then(res => {
            if (res.code == 0) {
              this.$Message.success("修改安装信息成功！");
              this.installCancel();
              this.getAll();
            }
          });
        } else {
          this.$Message.error("请完善信息！");
        }
      });
    },
    installCancel() {
      this.installFormItem = {};
      this.install = false;
    },
    getAll() {
      // let data = {
      //   implementId: this.implementId
      // };
      this.pagedata.query = {
        ImplementId: this.implementId
      };
      this.$api.getImplementDetails(this.pagedata).then(res => {
        if (!res.error) {
          this.dataAll = res.Data.list;

          this.totals = res.Data.total;
        } else {
          this.$Message.error(res.message);
        }
        this.loading = false;
      });
    }
  },
  mounted() {
    this.getAll(this.pagedata);
  }
};
</script>

<style scoped>
</style>